<template>
  <div class="lowcode-list">
    <el-button type="primary" @click="goDesigner">+ 新建页面</el-button>
    <el-table :data="pageList" stripe style="margin-top: 20px;">
      <el-table-column prop="name" label="页面名称" width="150"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="routePath" label="路径" width="150"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="editPage(scope.row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="deletePageData(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { listPages, deletePage } from '@/api/lowcode'

export default {
  name: 'LowcodeList',
  data() {
    return {
      pageList: []
    }
  },
  mounted() {
    this.loadPages()
  },
  methods: {
    async loadPages() {
      try {
        const res = await listPages()
        console.log('API响应:', res)
        this.pageList = res.data.records || []
      } catch (error) {
        console.error('加载页面错误:', error)
        this.$message.error('加载失败: ' + error.message)
      }
    },
    goDesigner() {
      console.log('跳转到设计器')
      this.$router.push('/lowcode/designer')
    },
    editPage(id) {
      this.$router.push(`/lowcode/designer/${id}`)
    },
    async deletePageData(id) {
      try {
        await deletePage(id)
        this.$message.success('删除成功')
        this.loadPages()
      } catch (error) {
        console.error('删除错误:', error)
        this.$message.error('删除失败: ' + error.message)
      }
    }
  }
}
</script>

<style scoped>
.lowcode-list {
  padding: 20px;
}
</style>
